﻿<!DOCTYPE html>
<!--[if IE]><![endif]-->
<html>
  
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Vue binding </title>
    <meta name="viewport" content="width=device-width">
    <meta name="title" content="Vue binding ">
    <meta name="generator" content="docfx 2.40.7.0">
    
    <link rel="shortcut icon" href="../favicon.ico">
    <link rel="stylesheet" href="../styles/docfx.vendor.css">
    <link rel="stylesheet" href="../styles/docfx.css">
    <link rel="stylesheet" href="../styles/main.css">
    <meta property="docfx:navrel" content="../toc.html">
    <meta property="docfx:tocrel" content="toc.html">
    
    
    
  </head>
  <body data-spy="scroll" data-target="#affix" data-offset="120">
    <div id="wrapper">
      <header>
        
        <nav id="autocollapse" class="navbar navbar-inverse ng-scope" role="navigation">
          <div class="container">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              
              <a class="navbar-brand" href="../index.html">
                <img id="logo" class="svg" src="../logo.svg" alt="">
              </a>
            </div>
            <div class="collapse navbar-collapse" id="navbar">
              <form class="navbar-form navbar-right" role="search" id="search">
                <div class="form-group">
                  <input type="text" class="form-control" id="search-query" placeholder="Search" autocomplete="off">
                </div>
              </form>
            </div>
          </div>
        </nav>
        
        <div class="subnav navbar navbar-default">
          <div class="container hide-when-search" id="breadcrumb">
            <ul class="breadcrumb">
              <li></li>
            </ul>
          </div>
        </div>
      </header>
      <div role="main" class="container body-content hide-when-search">
        
        <div class="sidenav hide-when-search">
          <a class="btn toc-toggle collapse" data-toggle="collapse" href="#sidetoggle" aria-expanded="false" aria-controls="sidetoggle">Show / Hide Table of Contents</a>
          <div class="sidetoggle collapse" id="sidetoggle">
            <div id="sidetoc"></div>
          </div>
        </div>
        <div class="article row grid-right">
          <div class="col-md-10">
            <article class="content wrap" id="_content" data-uid="">

<a href="https://github.com/NeutroniumCore/Neutronium" target="_blank">
  <img style="position: fixed; top: 0; right: 0; border: 0; z-index:99999" width="149" height="149" src="https://github.blog/wp-content/uploads/2008/12/forkme_right_gray_6d6d6d.png?resize=149%2C149" class="attachment-full size-full" alt="Fork me on GitHub" data-recalc-dims="1">
</a>
<h1 id="vue-binding">Vue binding</h1>
<h2 id="important">Important:</h2>
<p>Vue binding will be automatically applyed inside an HTML element with the main id.<br>
So all HTML depending on vue should be wrapped inside a main div:</p>
<pre><code class="lang-HTML">&lt;div id=&quot;main&quot;&gt;
   &lt;!-- Your vue logic here --&gt;
&lt;/div&gt;
</code></pre>
<p>See Complete Example: <a href="https://github.com/NeutroniumCore/Neutronium/tree/master/Examples/Example.ChromiumFX.Vue.UI">Example.ChromiumFX.Vue.UI</a></p>
<p>Vue binding is provided by the <code>Neutronium.JavascriptFramework.Vue</code> assembly that exposes the following injectors:<br>
<strong>For Vue.js 1.0</strong>: <code>VueSessionInjector</code>   registered name <strong>VueInjector</strong><br>
<strong>For Vue.js 2.0</strong>: <code>VueSessionInjectorV2</code> registered name <strong>VueInjectorV2</strong><br></p>
<p>Given the following ViewModel:</p>
<pre><code class="lang-CSharp">public class Skill
{
	public string Type { get;}
	public string Name { get;}

	public Skill (string name, string skillType)
	{
		Name = name;
		Type = skillType;
	}
}

public class Person: ViewModelBase
{
	private string _Name;
	public string Name
	{
		get { return _Name; }
		set { Set(ref _Name, value, &quot;Name&quot;); }
	}

	private Skill _MainSkill;
	public Skill MainSkill
	{
		get { return _MainSkill; }
		set { Set(ref _MainSkill, value, &quot;MainSkill&quot;); }
	}
	   
	public IList&lt;Skill&gt; Skills { get; private set; }
	public ICommand RemoveSkill { get; private set; }
 	public ICommand AddSkill { get; private set; }
	
	public Person()
	{
		Skills = new ObservableCollection&lt;Skill&gt;();
		RemoveSkill = new RelayCommand&lt;Skill&gt;(s=&gt; this.Skills.Remove(s));
		AddSkill = new RelayCommand(_ =&gt; this.Skills.Add(new Skill(&quot;Vue.js&quot;, &quot;javascript&quot;));
	}	  
}
</code></pre>
<h2 id="bind-to-a-property">Bind to a property:</h2>
<pre><code class="lang-HTML">&lt;span&gt;{{Name}}&lt;/span&gt;
</code></pre>
<h2 id="bind-to-a-nested-property">Bind to a nested property:</h2>
<pre><code class="lang-HTML">&lt;span&gt;{{Skill.Name}}&lt;/span&gt;
</code></pre>
<h2 id="bind-to-a-collection">Bind to a Collection:</h2>
<pre><code class="lang-HTML">&lt;div v-for:&quot;skill in Skills&quot; :key=&quot;skill.Name&quot;&gt;{{skill.Name}}&lt;/div&gt;
</code></pre>
<h2 id="bind-to-a-command">Bind to a Command:</h2>
<p>Recommended way to use Neutronium is to use the <a href="https://github.com/NeutroniumCore/neutronium-vue">vue-cli</a> and <a href="https://github.com/NeutroniumCore/neutronium-vue-command-mixin">vue-mixin-command</a> to bind with command. But it is possible to use low level API to bind with command:</p>
<pre><code class="lang-HTML">&lt;button @:click:&quot;RemoveSkill.Execute(skill)&quot;&gt;&lt;/button&gt;
</code></pre>
<h2 id="using-command-mixin">Using command mixin:</h2>
<p>When using the vue-cli 3 plugin template <a href="https://github.com/NeutroniumCore/vue-cli-plugin-neutronium"><code>vue-cli-plugin-neutronium</code></a> which is the recommended tool when building mid or large scale Neutronium application (<a href="../articles/large-project.html">reference here</a>).<br></p>
<h3 id="install">Install:</h3>
<pre><code class="lang-bash">npm install --save neutronium-vue-command-mixin
</code></pre>
<h3 id="usage">Usage</h3>
<p>Provide mixin to easily integrate ICommand in vue.js using Neutronium.
Component this mixin exposes:</p>
<h3 id="props">Props</h3>
<ul>
<li><p><code>command</code><br>
Type: <code>Object</code><br>
Required: <code>true</code><br>
The property corresponding to the C# command.</p>
</li>
<li><p><code>arg</code><br>
Type: <code>Object</code><br>
Required: <code>false</code><br>
The argument that will be passed to comand when execute is called.</p>
</li>
</ul>
<h3 id="computed">Computed</h3>
<ul>
<li><code>canExecute</code><br>
Type: <code>Boolean</code><br>
true if Command CanExecute is true.</li>
</ul>
<h3 id="method">Method</h3>
<ul>
<li><code>execute</code><br>
Call the corresponding command with the argument <code>arg</code><br></li>
</ul>
<h3 id="events">Events</h3>
<ul>
<li><p><code>beforeExecute</code><br>
Called before calling command execute if CanExecute is true. <br>
The event argument provides two properties: <br></p>
<ul>
<li><code>arg</code>: <code>Object</code> the command argument,</li>
<li><code>cancel</code>: <code>false</code> set it to true to cancel the execution</li>
</ul>
</li>
<li><p><code>afterExecute</code><br>
Called after calling command execute.<br>
The event argument is the command argument.<br></p>
</li>
</ul>
<h3 id="example">Example</h3>
<p>Declaring buttonCommand component in a .vue file (using semantic ui):</p>
<pre><code class="lang-HTML">&lt;template&gt;
  &lt;div class=&quot;ui button&quot; :class=&quot;{'disabled': !canExecute}&quot; @click=&quot;execute&quot;&gt;   
    &lt;slot&gt;&lt;/slot&gt;  
  &lt;/div&gt;
&lt;/template&gt;
&lt;script&gt;
import comandMixin from 'neutronium-vue-command-mixin'

export default {
  mixins:[comandMixin]
}
&lt;/script&gt;
</code></pre>
<p>Using buttonCommand:</p>
<pre><code class="lang-HTML">&lt;button-command :command=&quot;compute&quot; :arg=&quot;argument&quot;&gt;
Submit
&lt;/button-command&gt; 
</code></pre>
<h3 id="advanced-iresultcommand-support">Advanced: <code>IResultCommand</code> support</h3>
<p>Neutronium provides binding to <a href="./mvvm-components.html#iresultcommand">IResultCommand</a> making possible to call a C# function returning a Task from javascript and receiving the response as a promise.</p>
<p>Npm module <a href="https://github.com/NeutroniumCore/neutronium-vue-resultcommand-topromise">neutronium-vue-resultcommand-topromise</a> is an helper to obtain promise from resultCommand on the javascript side.</p>
<p>Example:</p>
<p>To bind to C# ResultCommand property:</p>
<pre><code class="lang-CSharp">public class ViewModel
{
    public IResultCommand ResultCommand {get;} 
    
    public ViewModel()
    {
        ResultCommand = RelayResultCommand.Create&lt;string, int&gt;(Count);
    }

    private int? Count(string routeName)
    {
       return routeName?.Lenght;
    }
}
</code></pre>
<p>Do on javascript side:</p>
<pre><code class="lang-javascript">import {toPromise} from 'neutronium-vue-resultcommand-topromise'

const promise = toPromise(viewModel.ResultCommand, 'countLetterNumber');
promise.then((ok)=&gt;{
     //Ok code
 }, (error) =&gt;{
 //Error handling
})
</code></pre>
</article>
          </div>
          
          <div class="hidden-sm col-md-2" role="complementary">
            <div class="sideaffix">
              <div class="contribution">
                <ul class="nav">
                  <li>
                    <a href="https://github.com/NeutroniumCore/Neutronium/blob/master/Documentation/Neutronium.Documentation/binding/vue.md/#L1" class="contribution-link">Improve this Doc</a>
                  </li>
                </ul>
              </div>
              <nav class="bs-docs-sidebar hidden-print hidden-xs hidden-sm affix" id="affix">
              <!-- <p><a class="back-to-top" href="#top">Back to top</a><p> -->
              </nav>
            </div>
          </div>
        </div>
      </div>
      
      <footer>
        <div class="grad-bottom"></div>
        <div class="footer">
          <div class="container">
            <span class="pull-right">
              <a href="#top">Back to top</a>
            </span>
            
            <span>Generated by <strong>DocFX</strong></span>
          </div>
        </div>
      </footer>
    </div>
    
    <script type="text/javascript" src="../styles/docfx.vendor.js"></script>
    <script type="text/javascript" src="../styles/docfx.js"></script>
    <script type="text/javascript" src="../styles/main.js"></script>
  </body>
</html>
